<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        body{
            width: 100%;
            position: relative;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 5rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: right;
        }
        .d5{
            width: 34rem;
            height: 3rem;
            position: absolute;
            top: 0rem;
            left: 4rem;
            background-color: white;
        }
        .img3{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            left: 1rem;
        }
        #i1{
            width: 20rem;
            height: 2rem;
            border-width: 0;
            position: absolute;
            top: 0.5rem;
            left: 4rem;
        }

        .div2{
            width: 47rem;
            height: 12rem;
            position: relative;
            background: url(img/12.png);
        }
        .d6{
            width: 12rem;
            height: 6rem;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .img4{
            width: 12rem;
            height: 6rem;
        }
        .p3{
            width: 10rem;
            height: 2rem;
            font-size: 1.8rem;
            color: white;
            font-weight: 700;
            line-height: 2rem;
            position: absolute;
            top: 6rem;
            left: 13rem;
        }
        .d7{
            width: 9rem;
            height: 1rem;
            position: absolute;
            top: 8.5rem;
            left: 13rem;
        }
        .img5{
            width: 9rem;
            height: 1rem;
        }

        .div3{
            width: 46rem;
            height: 143rem;
            background-color: rgb(244,244,244);
            padding-top: 1rem;
            padding-left: 1rem;
        }
        .d8{
            width: 22rem;
            height: 33rem;
            float: left;
            background-color: white;
            margin-right: 1rem;
            margin-bottom: 1rem;
        }
        .d9{
            width: 22rem;
            height: 19rem;
            padding-top: 3rem;
            text-align: center;
            line-height: 22rem;
        }
        .img6{
            width: 15rem;
        }
        .img7{
            width: 15rem;
        }
        .p4{
            width: 20rem;
            height: 4rem;
            margin-top: 1rem;
            margin-left: 1rem;
            font-size: 1.5rem;
            color: rgb(139, 138, 138);
            line-height: 2rem;
        }
        .p5{
            width: 10rem;
            height: 4rem;
            margin-top: 1.5rem;
            margin-left: 1rem;
            font-size: 2rem;
            color: red;
            line-height: 2rem;
            position: relative;
        }
        .d01{
            width: 2rem;
            height: 2rem;
            position: absolute;
            left: 0;
            top: 0;
        }
        .d02{
            width: 8rem;
            height: 2rem;
            position: absolute;
            left: 2rem;
            top: 0;
        }
        .d001{
            width: 46rem;
            height: 4rem;
            margin-top: 138rem;
            font-size: 1.5rem;
            color: rgb(139, 138, 138);
            line-height: 2rem;
            text-align: center;
        }

        .div4{
            width: 47rem;
            height: 6rem;
            position: relative;
            background-color: white;
            display: none;
        }
        .d10{
            width: 11.75rem;
            height: 5.7rem;
            line-height: 5.7rem;
            font-size: 2rem;
            text-align: center;
            float: left;
            color: rgb(139, 138, 138);
            position: relative;
        }
        #d002{
            width: 11.75rem;
            height: 0.3rem;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .fa{
            font-size: 2rem;
        }

        .div5{
            width: 35rem;
            height: 80rem;
            position: absolute;
            top: 14rem;
            left: 12rem;
            background-color: black;
            display: none;
        }
        .d11{
            width: 33rem;
            height: 4rem;
            font-size: 2rem;
            line-height: 4rem;
            padding-left: 2rem;
            color: rgba(241, 234, 234, 0.6);
            font-weight: 700;
            position: relative;
            border-bottom: 0.1rem solid rgba(241, 234, 234, 0.6);
        }
        .d12{
            width: 1rem;
            height: 2rem;
            position: absolute;
            right: 1rem;
            top: 0.5rem;
            text-align: right;
        }
        .d13{
            width: 35rem;
            height: 24rem;
            display: none;
        }
        .d14{
            width: 35rem;
            height: 24rem;
            display: none;
        }
        .d003{
            width: 35rem;
            height: 4rem;
            font-size: 2rem;
            line-height: 4rem;
            color: rgba(241, 234, 234, 0.6);
            box-sizing: border-box;
            padding-left: 4rem;
            border-bottom: 0.1rem solid rgba(241, 234, 234, 0.6);
        }
        .fa{
            color: rgba(241, 234, 234, 0.6);
            font-size: 2rem;
        }
        .f2{
            display: none;
        }
        .f4{
            display: none;
        }
        .d004{
            width: 10rem;
            height: 3rem;
            font-size: 2rem;
            line-height: 3rem;
            padding-left: 2rem;
            color: rgba(241, 234, 234, 0.6);
            position: absolute;
            right: 3rem;
            top: 0.5rem;
            font-weight: 500;
            border-radius: 1rem;
            border-left: 0.1rem solid rgba(241, 234, 234, 0.6);
            border-right: 0.1rem solid rgba(241, 234, 234, 0.6);
        }
        .ff{
            color: rgb(117, 117, 117);
            vertical-align: middle;
            display: none;
        }
        .fff{
            color: rgb(117, 117, 117);
            /* display: none; */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="d5">
                    <img src="img/fdj.png" alt="" class="img3">
                    <input type="text" id="i1" placeholder="搜索店铺内商品">
                </div>
                <div class="p2">分类</div>
            </div>
        </div>

        <div class="div2">
            <div class="d6">
                <img src="img/tianou2.png" alt="" class="img4">
            </div>
            <div class="p3">天喔专营店</div>
            <div class="d7">
                <img src="img/xing.png" alt="" class="img5">
            </div>
        </div>

        <div class="div4">
            <div class="d10">销量</div>
            <div class="d10 df">价格
                <i class="fa fa-long-arrow-up fa-2x ff" aria-hidden="true"></i>
                <i class="fa fa-long-arrow-down fa-2x fff" aria-hidden="true"></i>
                <!-- <i class="fa fa-long-arrow-down fa-2x fff" aria-hidden="true"></i> -->
                <!-- <div class="d005">
                    <i class="fa fa-long-arrow-up fa-2x ff" aria-hidden="true"></i>
                </div>
                <div class="d006">
                    <i class="fa fa-long-arrow-down fa-2x fff" aria-hidden="true"></i>
                </div> -->
            </div>
            <div class="d10">新品</div>
            <div class="d10">人气</div>
            <div id="d002"></div>
        </div>

        <div class="div3">
            <div class="d8">
                <div class="d9">
                    <img src="img/112.png" alt="" class="img6">
                </div>
                <div class="p4">
                    GOME酒窖 女王之家干红葡萄酒3支装 750ml*3
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">99.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/1113.png" alt="" class="img7">
                </div>
                <div class="p4">
                    哈迪徽章赤霞珠干红 会长干白 起泡葡萄酒
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">128.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/112.png" alt="" class="img6">
                </div>
                <div class="p4">
                    GOME酒窖 女王之家干红葡萄酒3支装 750ml*3
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">199.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/1113.png" alt="" class="img7">
                </div>
                <div class="p4">
                    哈迪徽章赤霞珠干红 会长干白 起泡葡萄酒
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">169.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/112.png" alt="" class="img6">
                </div>
                <div class="p4">
                    GOME酒窖 女王之家干红葡萄酒3支装 750ml*3
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">59.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/1113.png" alt="" class="img7">
                </div>
                <div class="p4">
                    哈迪徽章赤霞珠干红 会长干白 起泡葡萄酒
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">299.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/112.png" alt="" class="img6">
                </div>
                <div class="p4">
                    GOME酒窖 女王之家干红葡萄酒3支装 750ml*3
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">179.00</div>
                </div>
            </div>
            <div class="d8">
                <div class="d9">
                    <img src="img/1113.png" alt="" class="img7">
                </div>
                <div class="p4">
                    哈迪徽章赤霞珠干红 会长干白 起泡葡萄酒
                </div>
                <div class="p5">
                    <div class="d01">￥</div>
                    <div class="d02">229.00</div>
                </div>
            </div>
            <div class="d001">没有更多了</div>
        </div>
    </div>

        <div class="div5">
            <div class="d11">全部分类
                <div class="d004">收回分类</div>
            </div>
            <div class="d11">
                葡萄酒
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x f1" aria-hidden="true"></i>
                    <i class="fa fa-angle-down fa-2x f2" aria-hidden="true"></i>
                </div>
            </div>
            <div class="d13">
                <div class="d003">甜白葡萄酒</div>
                <div class="d003">名庄</div>
                <div class="d003">桃红葡萄酒</div>
                <div class="d003">香槟/起泡酒</div>
                <div class="d003">白葡萄酒</div>
                <div class="d003">红葡萄酒</div>
            </div>
            <div class="d11">酒柜套装
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
            <div class="d11">啤酒
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x f3" aria-hidden="true"></i>
                    <i class="fa fa-angle-down fa-2x f4" aria-hidden="true"></i>
                </div>
            </div>
            <div class="d14">
                <div class="d003">纯生啤酒</div>
                <div class="d003">干啤酒</div>
                <div class="d003">黑啤酒</div>
                <div class="d003">冰啤酒</div>
                <div class="d003">全麦芽啤酒</div>
                <div class="d003">果味啤酒</div>
            </div>
            <div class="d11">中国白酒
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
            <div class="d11">多支套装
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
            <div class="d11">洋酒烈酒
                <div class="d12">
                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }


        $(".d10").click(function(){
            $("#d002").animate({
                left:$(this).position().left
            },200);
        })

        $(".p2").on("click",function(){
            $(".div5").css("display","block");
        })
        $(".d004").on("click",function(){
            $(".div5").css("display","none");
        })

        
        $(".f1").on("click",function(){
            $(".d13").slideDown(500,function(){
                $(".f1").css("display","none");
                $(".f2").css("display","block");
                $(".d13").css("display","block");
            })
        })
        $(".f3").on("click",function(){
            $(".d14").slideDown(500,function(){
                $(".f3").css("display","none");
                $(".f4").css("display","block");
                $(".d14").css("display","block");
            })
        })
        $(".f2").on("click",function(){
            $(".d13").slideUp(500,function(){
                $(".f2").css("display","none");
                $(".f1").css("display","block");
                $(".d13").css("display","none");
            })
        })
        $(".f4").on("click",function(){
            $(".d14").slideUp(500,function(){
                $(".f4").css("display","none");
                $(".f3").css("display","block");
                $(".d14").css("display","none");
            })
        })

        $(".d5").on("click",function(){
            $(".div2").css("display","none");
            $(".div4").css("display","block");
        })

        var b = document.getElementsByClassName("p4");
        console.log(b)

        i1.oninput = function(){
			var reg = new RegExp(this.value, "g");
			$(b).each(function(v, i) {
                var str = $("#i1").val();
                console.log(str)
                for(var i = 0; i < b.length; i++){
	                if(b[i].innerHTML.includes(str)){
                        $(b[i]).parent().css("display","block")
		            }
	                else{
                        $(b[i]).parent().css("display","none")
		            }
	            }
			})
        }

        // var c = document.getElementsByClassName("d02");
        // console.log(c)

        var flag = false;
        $(".df").on("click",function(){
            var d8s = $(".d8");
            //升序
            if(flag == false){
                //排序 b-a
                d8s.sort(function(a,b){
                    var aa = $(a).find(".d02").html();
                    var bb = $(b).find(".d02").html();
                    return parseInt(bb) - parseInt(aa);
                })
                //移出并依次添加
                $(".d8").remove();
                for(var i = 0; i < d8s.length; i++){
                    $(d8s[i]).prependTo(".div3");
                }
                //变图标
                flag = true;
                $(".fff").css("display","none");
                $(".ff").css("display","inline-block");
            }else{
                //降序
                //排序 a-b
                d8s.sort(function(a,b){
                    var aa = $(a).find(".d02").html();
                    var bb = $(b).find(".d02").html();
                    return parseInt(aa) - parseInt(bb);
                })
                //移出并依次添加
                $(".d8").remove();
                for(var i = 0; i < d8s.length; i++){
                    $(d8s[i]).prependTo(".div3");
                }
                //变图标
                flag = false;
                $(".fff").css("display","inline-block");
                $(".ff").css("display","none");
            }
        })


        $(".d3").click(function(){
			window.location.href="分类.html";
		})
    </script>
</body>
</html>